<template>
  <!-- 补货清单弹出框 -->
  <div class="list">
    <el-dialog
      title="补货详情"
      :visible="detailsVisible"
      width="40%"
      @open="opneDialog"
      @close="closeDialog"
    >
      <div style="height: 380px" class="scrollbar">
        <el-scrollbar style="height: 100%">
          <!-- 表格 -->
          <el-table
            :data="detailsDialog.list"
            style="width: 98%"
            :header-cell-style="{
              fontWeight: 'normal',
              background: '#f3f6fb',
            }"
          >
            <el-table-column label="货到编号" prop="channelCode" />
            <el-table-column label="商品" prop="skuName" />
            <el-table-column label="补货数量" prop="expectCapacity" />
          </el-table>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { gettaskDetails } from '@/api/task'
export default {
  props: {
    detailsVisible: {
      type: Boolean,
      default: () => {}
    },
    taskId: {
      type: String,
      default: () => {}
    }
  },
  data() {
    return {
      // details补货详情弹出框
      detailsDialog: {
        expectCapacity: 1,
        list: [
        //   {
        //     detailsId: '35193',
        //     taskId: '3421',
        //     channelCode: '1-1',
        //     expectCapacity: 4,
        //     skuId: '1',
        //     skuName: '可口可乐',
        //     skuImage: 'http://lkd2-java.itheima.net/image/product1.png'
        //   }
        ]
      }
    }
  },
  methods: {
    // 1.父组件点击补货详情弹出框的时候把taskId传递过来--弹出层一打开的说实话马上请求后端数据
    // 然后渲染页面
    async opneDialog() {
      const { data } = await gettaskDetails(this.taskId)
      this.detailsDialog.list = data
    },
    // 2.关闭弹出层触发父组件自定义事件
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style lang="scss">
.list{
   .scrollbar {
    .el-scrollbar {
      // display: flex;
      // justify-content: space-around;
      padding-bottom: 20px;
      padding-right: -5px;
    }
    .el-scrollbar__wrap {
      // 必要的
      overflow: scroll;
      overflow-x: hidden;
      margin-right: -80px;
      //width: 180%;  //隐藏侧边默认滚动条 （达不到效果可以自己试着微调） 如解决不了可尝试用 `margin-right -60px`
      height: 105%; //隐藏底部滚动条  （100%如果达不到效果可以试着用110%）
    }
  }
  .el-dialog {
    border-radius: 10px;
    .el-dialog__header .el-dialog__title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
    }
    .el-dialog__header {
      border-radius: 10px;
      background-color: #fff;
    }
    .el-icon-close:before {
      color: #909399;
    }
    .el-dialog__body {
      padding: 15px 20px;
    }
  }
  .el-table {
    position: unset;
  }
  .el-table thead {
    color: #666666 !important;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0 !important;
  }
  .el-table--fit {
    margin-top: 10px;
  }
  .el-table td {
    padding: 5px;
  }
}

</style>
